<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.bipolar.js" ></script>
    <script src="../libraries/RGraph.gauge.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A bipolar chart with a Gauge on the same page</title>
    
    <meta name="description" content="A page with two canvas tags that show a Bipolar chart and a Gauge chart" />
     
</head>
<body>

    <h1>A bipolar chart with a Gauge on the same page</h1>
    
    <p>
        This an example of two different charts (on two different canvases) on one page. If you don't use the window.onload or the
        jQuery .ready() event then Chrome can sometimes have trouble showing the charts.
    </p>

    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
    <canvas id="cvs2" width="250" height="250">[No canvas support]</canvas>
    
    <script>
        $(document).ready(function ()
        {
            var bipolar = new RGraph.Bipolar({
                id: 'cvs1',
                left: [4,8,6,4,3],
                right: [18,4,6,3,3],
                options: {
                    labels: ['Luis','Peter','Joe','Hoolio','Gina']
                }
            }).draw();

            var gauge = new RGraph.Gauge('cvs2', 0,100,87)
                .set('adjustable', true)
                .draw();
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>